<template>
  <div>
    <el-button type="text" @click="clickHandle">打开嵌套表格的 Dialog</el-button>
    <el-dialog id="watermark3" v-water="{id:'789123',str:'watermark3',dom:'watermark3'}" :visible.sync="dialogTableVisible"
               title="收货地址">
      <el-table :data="gridData">
        <el-table-column label="日期" property="date" width="150"></el-table-column>
        <el-table-column label="姓名" property="name" width="200"></el-table-column>
        <el-table-column label="地址" property="address"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Watermark from "@/utils/warterMarkVue.js";

export default {
  data() {
    return {
      gridData: [{
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      }, {
        date: "2016-05-04",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      }, {
        date: "2016-05-01",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      }, {
        date: "2016-05-03",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      }],
      dialogTableVisible: false
    };
  },
  methods: {
    clickHandle() {
      this.dialogTableVisible = true;
      this.$nextTick(() => {
        Watermark.set(
            "id666",
            `watermark3`,
            document.getElementById("watermark3")
        );
      });
    }
  }
};
</script>
